<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"
    \"http://www.w3.org/TR/html4/loose.dtd\">
<html>
<head>
<title>q10116490425 javascriptで拡大画像を複数設置したい test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript" ></script>
<base href="http://www.red.oit-net.jp/tatsuya/java/image3.htm">
<script type="text/javascript">
// leftPx topPy カーソルを乗せた時のカーソルの位置からの距離を指定する。
// マイナス値もＯＫ
// fspeed フェードイン、フェードアウトのスピード(ミリ秒) 1000 は　1秒
// class_namesはユニークで好きな名前を設定してください。
$.fn.extend({
Image_popup:function(class_names,leftPx,topPy,fspeed){
  $(this).hover(function(e){
   var imgsrc = $(this).attr("rel");
   $('body').append( '<div class="'+class_names+'" style="display:none;position:absolute;left: 0px;top:0px;border:none;"><img src="' + imgsrc + '"></div>' );
   var class_name = "."+class_names;
   var lPos       = (e.pageX + leftPx);
   var tPos       = (e.pageY + topPy);
   $(class_name).css("top",  tPos + "px");
   $(class_name).css("left", lPos + "px");
   $(class_name).css("border", "15px solid #cccccc"); // 枠
   $(class_name).fadeIn(fspeed);
  },function(e){
   var class_name = "."+class_names;
   $(class_name).fadeOut(fspeed);
   $(class_name).remove();
  });
 }
});

$(document).ready(function(){
 $(".popupImages1").Image_popup("imageboxs1",-130,50,700);
 $(".popupImages2").Image_popup("imageboxs2",-130,-310,700);
});
</script>
<style>
body{
background-color:#000000;
color:#ffffff;
}
#contents1{
width:700px;
margin:auto;
}
</style>
</head>
<body>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<div id="contents1">
<TABLE>
<TR>
<TD><A href="javascript:void(0)" rel='IMG_0141.gif' class="popupImages1")"><IMG src="IMG_0141s.gif" width="100" height="75"></A></TD>
<TD><A href="javascript:void(0)" rel='IMG_0400.gif' class="popupImages1")"><IMG src="IMG_0400s.gif" width="100" height="75"></A></TD>
<TD><A href="javascript:void(0)" rel='IMG_0667.gif' class="popupImages2")"><IMG src="IMG_0667s.gif" width="100" height="75"></A></TD>
<TD><A href="javascript:void(0)" rel='IMG_0679.gif' class="popupImages2")"><IMG src="IMG_0679s.gif" width="100" height="75"></A></TD>
</TR>
</TABLE>
</div>
</body>
</html>


